<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>flex-grow</title>
    <style>
        <!--
        /*flex:设在父级上*/
        /*子元素会继承父元素高度，宽度会平分，排布在一行*/
        /*flex-grow:子元素平分的百分比*/
        /*flex-basis:子元素的起始宽度*/
        /*flex-shrink:某个子元素相对于其他元素的比例*/
        -->
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 400px;
            height: 50px;
            box-shadow:0 0 2px 4px #AAA;
            margin: 50px auto;
            display:flex;

        }
        #box div{
            flex-grow:1;
            flex-basis: 120px;
        }
        #box div:nth-child(1){
            flex-shrink: 3;
        }


        #box div:nth-child(1){
            background: red;
        }
        #box div:nth-child(2){
            background: orange;
        }
        #box div:nth-child(3){
            background: green;
        }
        #box div:nth-child(4){
            background: blue;
        }
        #box div:nth-child(5){
            background: purple;
        }
    </style>
</head>
<body>
<div id="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>